<template>
	<view>
		<view class="rows m-bot24 p-re" v-if="pageData.state == '-1'" @click="toAddress">
			<image :src="$imgUrls(pageData.bjImg)" mode="widthFix" class="rows"></image>
			<!-- <view class="infoTip d-flex f-column j-se">
			   <view class="Tip size30 bold">请提前两天发起安装预约</view>
			   <view class="rows">
				   <view class="Now">立即预约</view>
			   </view>		   
		   </view> -->
		</view>


		<view class="card row f-column" v-if="pageData.state == '0'">
			<text class="color_33 bold">安装预约</text>
			<text class="color_33 m-top24">预约时间：{{pageData.reservationDate}}</text>
			<text class="color_f8 m-top10">等待分配安装人员</text>
		</view>

		<view class="card row f-column" v-if="pageData.state == '1'">
			<text class="color_33 bold">安装预约</text>
			<text class="color_33 m-top24">预约时间：{{pageData.reservationDate}}</text>
			<text class="color_33 m-top10">安装人员：{{pageData.res_name}}</text>
			<view class="d-flex a-center m-top10" @click.stop="$common.Tel(pageData.res_tel)">
				<text class="color_33">联系电话：{{pageData.res_tel}}</text>
				<image :src="$online('tel.png')" class="tel m-left20"></image>
			</view>

			<view class="d-flex a-center m-top10">
				<text class="color_33">验 证 码：</text>
				<text class="color_61 bold500">{{pageData.code}}</text>
			</view>
		</view>


		<view class="card row f-column" v-if="pageData.state == '2'">
			<text class="color_33 bold">安装完成</text>
			<text class="color_33 m-top24">预约时间：{{pageData.reservationDate}}</text>
			<text class="color_33 m-top10">安装人员：{{pageData.res_name}}</text>
			<view class="d-flex a-center m-top10" @click.stop="$common.Tel(pageData.res_tel)">
				<text class="color_33">联系电话：{{pageData.res_tel}}</text>
				<image :src="$online('tel.png')" class="tel m-left20"></image>
			</view>

			<text class="color_33 m-top10">完成时间：{{pageData.endDate}}</text>
		</view>



		<view class="card row f-column" v-if="pageData.state == '3'">
			<text class="color_33 bold">安装失败</text>
			<text class="color_33 m-top24">预约时间：{{pageData.reservationDate}}</text>
			<text class="color_33 m-top10">安装人员：{{pageData.res_name}}</text>
			<view class="d-flex a-center m-top10" @click.stop="$common.Tel(pageData.res_tel)">
				<text class="color_33">联系电话：{{pageData.res_tel}}</text>
				<image :src="$online('tel.png')" class="tel m-left20"></image>
			</view>

			<text class="color_f8 m-top20">{{pageData.end_content}}</text>

			<view class="row">
				<block v-for="(item,index) in pageData.endPhotoArr" :key="index">
					<image :src="$imgUrls(item)" mode="aspectFill" class="reloImg" v-if="item"
						@click="$common.previewImgs(index,pageData.endPhotoArr)"></image>
				</block>
			</view>
			<view class="row j-centert color_33 h6 m-top30">请与客服沟通后重复发起安装预约</view>
			<view class="row j-centert m-top30">
				<view class="Now" @click.stop="toAddress">立即预约</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: 'InstallStarte',
		props: ['pageData', 'order_id', 'detail', 'mapLocate'],
		data() {
			return {

			}
		},

		methods: {
			toAddress() {
				const name = this.detail.uname;
				const tel = this.detail.utel;
				const lon = this.mapLocate.wgs84.lon;
				const lat = this.mapLocate.wgs84.lat;

				this.toUrl(`installAddress?order_id=${this.order_id}&name=${name}&tel=${tel}&lon=${lon}&lat=${lat}`)
			}
		},


	}
</script>

<style lang="scss" scoped>
	.card {
		width: 710rpx;
		background: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin: 24rpx auto;

		text {
			font-size: 28rpx;
		}
	}

	.infoTip {
		width: 690rpx;
		height: 100%;
		position: absolute;
		top: 0;
		left: 30rpx;
	}

	.Tip {
		color: #476EB1;
	}

	.Now {
		min-width: 172rpx;
		height: 60rpx;
		background: #78A9FF;
		border-radius: 8rpx;
		text-align: center;
		line-height: 60rpx;
		color: #ffffff;
		font-size: 28rpx;
		display: inline-block;
	}

	.color_47 {
		color: #476EB1
	}

	.color_61 {
		color: #61B7FF;
	}

	.color_f8 {
		color: #FF812A;
	}

	.tel {
		width: 40rpx;
		height: 40rpx;
	}

	.reloImg {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
		margin-right: 16rpx;
		margin-top: 30rpx;
	}

	.reloImg:nth-child(4n) {
		margin-right: 0;
	}
</style>